<template>
    <div>
        <!-- 1.自定义导航组件 -->
        <nav-comp :back="$route.meta.back" :title="$route.meta.title"></nav-comp>
        <!-- 2. 间隔槽-->
        <!-- <gap-comp :height="1"></gap-comp> -->

        <!-- 2.head区域 -->
        <div class="head">
            <!-- <div class="search"> -->
            <van-search shape="round" background="rgba(0,0,0,0)" placeholder="请输入搜索关键词" />
            <!-- </div> -->
            <div class="sortbox">
                <div class="sort">
                    <div>综合排序</div>
                    <div>销量</div>
                    <div>
                        <span>价格</span>
                        <img src="../../assets/img/icon/sort.png" />
                    </div>
                    <div>好评度</div>
                    <div>店铺</div>
                </div>
                <div class="filter">
                    <img src="../../assets/img/icon/filter.png" />
                    <span>筛选</span>
                </div>
            </div>
        </div>

        <!-- 3. 间隔槽-->
        <gap-comp :height="3.5"></gap-comp>

        <!-- 4.商品列表区域 -->
        <!-- 4.1下拉刷新 原理：分页思想 重置页码第一页 获取第一页数据 赋空商品数据 新旧数据拼接-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 4.2上拉加载  原理：分页思想 页码++ 获取下一页数据 新旧数据拼接-->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
                <van-card v-for="item in goodList" :key="item.id" :price="item.price" desc="描述信息" :title="item.goodsname"
                    :thumb="$pre + item.img" @click="goDesc(item.id)" />
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cateid: "",//商品分类id
            type: "",//分类类型
            page: 1,//页码
            size: 6,//每次请求数据的条数（分页偏移量）
            goodList: [],//商品列表数据
            loading: false,//是否处于加载状态:bool (没有加载数据：false 数据加载中：true)
            finished: false,//是否已加载完成:bool(有更多数据：false 已完成全部数据加载：true)
            refreshing: false,//是否处于更新中状态:bool (没有加载数据：false 数据加载中：true)
        };
    },
    mounted() {
        // 赋值请求参数
        this.cateid = this.$route.query.cateid
        this.type = this.$route.query.type
        // 获取商品列表
        this.getList()
    },
    methods: {
        // 跳转到商品的详情页面
        goDesc(id) {
            this.$router.push("/gooddesc?id=" + id)
        },
        // 获取商品列表
        getList() {
            // 解构获取请求参数
            let { cateid, type, page, size } = this
            this.$api.reqGetGoodList({ cateid, type, page, size })
                .then(res => {
                    console.log(res)
                    // 检测是否有下一页数据
                    if (res.goodData == null || res.totalPage == 1) {
                        this.finished = true//关闭数据加载开关
                    }
                    // 赋值页面 新进数据拼接
                    this.goodList = this.goodList.concat(res.goodData == null ? [] : res.goodData)

                    // 关闭加载动画
                    this.loading = false

                    // 关闭刷新动画
                    this.refreshing = false
                })
                .catch(err => console.log(err))
        },
        async onRefresh() {
            console.log('数据更新中....')
            await this.$utils.delay(1000)
            this.finished = false
            this.page = 1
            this.goodList = []
            this.getList()
        },
        async onLoad() {
            console.log('数据加载中....')
            await this.$utils.delay(1000)
            ++this.page
            this.getList()
        }
    },
};
</script>

<style lang="less" scoped>
@import "../../assets/less/goodlist.less";
</style>
